<template>
  <div class="p-2">
    <div class="search" v-show="showSearch">
      <a-form ref="queryFormRef" :model="queryParams" layout="inline">
        <a-form-item label="流程名称" name="processName">
          <a-input v-model:value="queryParams.processName" placeholder="请输入流程名称" allow-clear style="width: 200px" @pressEnter="handleQuery" />
        </a-form-item>
        <a-form-item label="接收时间">
          <a-range-picker v-model:value="dateRange" :format="dateFormat" style="width: 240px" />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button type="primary" @click="handleQuery">
              <template #icon><SearchOutlined /></template>
              搜索
            </a-button>
            <a-button @click="resetQuery">
              <template #icon><ReloadOutlined /></template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </div>

    <a-card :bordered="false">
      <template #title>
        <a-row>
          <a-col :span="16">
            <a-space>
              <a-button @click="handleExport" v-hasPermi="['workflow:process:claimExport']">
                <template #icon><DownloadOutlined /></template>
                导出
              </a-button>
            </a-space>
          </a-col>
          <a-col :span="8" style="text-align: right">
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
          </a-col>
        </a-row>
      </template>

      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="claimList"
        :pagination="{
          total,
          current: queryParams.pageNum,
          pageSize: queryParams.pageSize,
          onChange: handleTableChange,
          showSizeChanger: true,
          showTotal: (total) => `共 ${total} 条`,
        }"
        :scroll="{ x: 1200 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'procDefVersion'">
            <a-tag>v{{ record.procDefVersion }}</a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-tooltip title="签收">
                <a-button type="link" @click="handleClaim(record)" v-hasPermi="['workflow:process:claim']">
                  <template #icon><EditOutlined /></template>
                </a-button>
              </a-tooltip>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup name="Claim">
  import { ref, onMounted, getCurrentInstance } from 'vue';
  import { useRouter } from 'vue-router';
  import { processApi, taskApi } from '/@/api/workflow/work';
  import { message } from 'ant-design-vue';
  import { SearchOutlined, ReloadOutlined, DownloadOutlined, EditOutlined } from '@ant-design/icons-vue';

  const router = useRouter();
  const { proxy } = getCurrentInstance();

  const claimList = ref([]);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const dateRange = ref([]);
  const dateFormat = 'YYYY-MM-DD';

  const columns = [
    {
      title: '任务编号',
      dataIndex: 'taskId',
      key: 'taskId',
      ellipsis: true,
      align: 'center',
    },
    {
      title: '流程名称',
      dataIndex: 'procDefName',
      key: 'procDefName',
      align: 'center',
    },
    {
      title: '任务节点',
      dataIndex: 'taskName',
      key: 'taskName',
      align: 'center',
    },
    {
      title: '流程版本',
      dataIndex: 'procDefVersion',
      key: 'procDefVersion',
      align: 'center',
    },
    {
      title: '流程发起人',
      dataIndex: 'startUserName',
      key: 'startUserName',
      align: 'center',
    },
    {
      title: '接收时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
      width: 180,
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      width: 180,
      fixed: 'right',
    },
  ];

  const queryFormRef = ref();

  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    processName: '',
  });

  /** 查询待办列表 */
  const getList = async () => {
    loading.value = true;
    try {
      const { data } = await processApi.listClaimProcess(queryParams.value);
      claimList.value = data.list;
      total.value = data.total;
    } catch (error) {
      message.error('获取列表失败');
    }
    loading.value = false;
  };

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.value.pageNum = 1;
    getList();
  };

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value?.resetFields();
    dateRange.value = [];
    handleQuery();
  };

  /** 表格分页 */
  const handleTableChange = (page, pageSize) => {
    queryParams.value.pageNum = page;
    queryParams.value.pageSize = pageSize;
    getList();
  };

  /** 签收按钮操作 */
  const handleClaim = async (row) => {
    try {
      const { msg } = await taskApi.claimTask({ taskId: row.taskId });
      message.success(msg);
      router.push({ path: '/work/todo' });
    } catch (error) {
      message.error('签收失败');
    }
  };

  /** 导出按钮操作 */
  const handleExport = () => {
    proxy?.download(
      'workflow/process/claimExport',
      {
        ...queryParams.value,
      },
      `claim_${new Date().getTime()}.xlsx`
    );
  };

  onMounted(() => {
    getList();
  });
</script>

<style lang="less" scoped>
  .search {
    margin-bottom: 16px;
  }
</style>
